import { Meta, Story, Preview, Props, action } from '@theforeman/stories';

import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
import TimeDropDown from './TimeDropDown';

<Meta
  title="TasksDashboard/TasksTimeRow/TimeDropDown"
  component={TimeDropDown}
/>

# TimeDropDown

Render a dropdown with the available dashboard times to render.

<Props of={TimeDropDown} />

The available-times defined as a constant at `Components/TasksDashboard/TasksDashboardConstants.js`:

```js
import { TASKS_DASHBOARD_AVAILABLE_TIMES } from './Components/TasksDashboard/TasksDashboardConstants';
```

To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.H24`.

<Preview>
  <Story name="24 hours">
    <TimeDropDown
      id="time-period-dropdown"
      selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.H24}
      onChange={action('onChange')}
    />
  </Story>
</Preview>

To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.H12`.

<Preview>
  <Story name="12 hours">
    <TimeDropDown
      id="time-period-dropdown"
      selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.H12}
      onChange={action('onChange')}
    />
  </Story>
</Preview>

To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK`.

<Preview>
  <Story name="week">
    <TimeDropDown
      id="time-period-dropdown"
      selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK}
      onChange={action('onChange')}
    />
  </Story>
</Preview>
